<template>
	<view class="jnpf-upload">
		<template v-if="fileList.length">
			<view class="u-list-item u-preview-wrap" v-for="(item, index) in fileList" :key="index">
				<view v-if="deletable" class="u-delete-icon" @tap.stop="deleteItem(index)">
					<u-icon class="u-icon" name="close" size="20" color="#ffffff"></u-icon>
				</view>
				<image class="u-preview-image" :src="baseUrl+item.url" mode="aspectFill"
					@tap.stop="doPreviewImage(baseUrl+item.url)"></image>
			</view>
		</template>
		<u-upload :max-size="fileSize*1024*1024"
		width="150" 
		height="150"
		 :max-count="limit"
		:action="action"
		@on-remove="onRemove"
		:show-progress= 'showProgress'
		:Status='Status'
		:show-upload-list="false"
		@on-success="onSuccess"></u-upload>
	</view>
</template>

<script>
	const units = {
		KB: 1024,
		MB: 1024 * 1024,
		GB: 1024 * 1024 * 1024
	}
	import config from '@/common/js/config.js'
	let apiKey = uni.getStorageSync('apiKey') || 'api';
	let baseUrl = config.Global.baseUrl[apiKey].apiUrl;
	const token = uni.getStorageSync(config.Global.cache + '_Token');
	export default {
		name: 'jnpf-upload',
		model: {
			prop: 'value',
			event: 'input'
		},
		props: {
			value: {
				type: Array,
				default: () => []
			},
			type: {
				type: String,
				default: 'workFlow'
			},
			limit: {
				type: Number,
				default: 99
			},
			sizeUnit: {
				type: String,
				default: 'MB'
			},
			fileSize: {
				type: Number,
				default: 2
			},
			disabled: {
				type: Boolean,
				default: false
			},
			upLoadDisabled:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				fileList: [],
				realLimit: 0,
				deletable: true,
				uploadHeaders: {
					Authorization: token
				},
				valueTitle:'',
				baseUrl:baseUrl,
				action: baseUrl+"/api/file/Uploader/"+this.type,
				showUploadList: false,
				upLoadImgList:[],
				Status:0,
				showProgress:false
			}
		},
		watch: {
			limit(val) {
				this.realLimit = val
			},
			value: {
				immediate: true,
				handler(val) {
					
					this.fileList = val
				}
			}
		},
		created() {
			//动态显示图片删除按钮
			// this.deletable = this.upLoadDisabled
			// console.log(this.upLoadDisabled)
			// let Status = uni.getStorageSync('F_Status');
			// if(Status){
			// 	this.Status = Status
			// 	if(this.Status == 1){
			// 		this.deletable = false
			// 	}
			// }
			if (this.disabled) {
				this.realLimit = this.fileList.length
				this.deletable = false
			} else {
				this.realLimit = this.limit
			}
		},
		methods: {
			// 上传文件类型校验
			isExcel(file) {
			  return /\.(png|jpeg|jpg|PNG|JPEG|JPG)$/.test(file.name)
			},
			
			
			onSuccess(data, index, lists, name) {
				if (data.code == 200) {
					this.fileList.push({
						name: lists[index].file.name,
						fileId: data.data.name,
						url: data.data.url
					})
					this.$emit('input', this.fileList)
				} else {
					lists.splice(index, 1)
					
				}
			},
			handleError(res, index, lists, name) {
				lists.splice(index, 1)
			},
			deleteItem(index) {
				// if(this.deletable) return
				uni.showModal({
					title: '提示',
					content: '您确定要删除此项吗？',
					success: res => {
						if (res.confirm) {
							this.fileList.splice(index, 1)
							this.$emit('input', this.fileList)
							uni.showToast({
								title: '移除成功',
								icon: 'none'
							});
						}
					}
				});
			},
			doPreviewImage(url) {
				const images = this.fileList.map(item => this.baseUrl + item.url);
				uni.previewImage({
					urls: images,
					current: url,
					success: () => {},
					fail: () => {
						uni.showToast({
							title: '预览图片失败',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	.jnpf-upload {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		background-color: #FFFFFF;
		
		.u-preview-wrap {
			width: 150rpx;
			height: 150rpx;
			border: 1px solid #ebecee;
			overflow: hidden;
			margin: 10rpx;
			background: rgb(244, 245, 246);
			position: relative;
			border-radius: 10rpx;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			align-items: center;
			justify-content: center;

			.u-preview-image {
				display: block;
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}

			.u-delete-icon {
				position: absolute;
				top: 10rpx;
				right: 10rpx;
				z-index: 10;
				background-color: $u-type-error;
				border-radius: 100rpx;
				width: 34rpx;
				height: 34rpx;
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				align-items: center;
				justify-content: center;
			}

			.u-icon {
				/* #ifndef APP-NVUE */
				display: flex;
				/* #endif */
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>
